<template>
  <div>
    <!-- 模糊查询 -->
    <div>
      <el-form :inline="true" :model="teacherForm" :rules="rules" ref="teacherForm" class="demo-form-inline">
      <el-form-item label="教师" prop="teacherInfo">
        <el-input v-model="teacherForm.teacherInfo" placeholder="教师信息"  @change="changeModel()"></el-input>
      </el-form-item>
      <el-form-item label="查询类型" prop="select">
        <el-select v-model="teacherForm.select" placeholder="选择查询类型"  @change="changeModel()">
          <el-option label="教师ID" value="1"></el-option>
          <el-option label="教师姓名" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('teacherForm')">查询</el-button>
      </el-form-item>
    </el-form>
    </div>

    <div>
      <el-table
        ref="multipleTable"
        :data="tableData.list"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          prop="teacherId"
          width="55">
        </el-table-column>
        <el-table-column
          label="教师编号"
          prop="teacherId"
          >
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="teacherRealname"
          >
        </el-table-column>
        <el-table-column
          label="性别"
          prop="teacherSex"
          >
        </el-table-column>
        <el-table-column
          label="角色"
          prop="role.roleDesc"
          width="150">
          <template slot-scope="scope" >
            <el-dropdown  @command="changeRole"  trigger="click">
              <el-button type="primary" size="small" @click="tid=scope.row.teacherId">
                <span>{{scope.row.role.roleDesc}}</span><i class="el-icon-arrow-down el-icon--right" ></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item  command="1"><span @click="scope.row.role.roleDesc='管理人员'">管理人员</span></el-dropdown-item>
                <el-dropdown-item  command="2"><span @click="scope.row.role.roleDesc='普通教师'">普通教师</span></el-dropdown-item>
                <el-dropdown-item  command="3"><span @click="scope.row.role.roleDesc='审核人员'">审核人员</span></el-dropdown-item>
                <el-dropdown-item command="4"><span @click="scope.row.role.roleDesc='测试人员'">测试人员</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </template>
        </el-table-column>
        <el-table-column
          label="详情"
          prop=""
          >
          <template slot-scope="scope">
           <el-dialog title="教师详情" :visible.sync="dialogFormVisible" :center=true scroll=true >
             <div style="margin: 10px;"></div>
                <el-form :label-position="labelPosition" label-width="80px"  :model="gridData">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="姓名:">
                        <el-input v-model="gridData.teacherRealname"  :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="编号:">
                        <el-input v-model="gridData.teacherId"  :disabled="true"></el-input>
                      </el-form-item>
                      <el-form-item label="出生日期:">
                        <template>
                          <div class="block">
                            <el-date-picker
                              v-model="gridData.teacherBirth"
                              :disabled="gridData.isShow"
                              type="date"
                              placeholder="选择日期">
                            </el-date-picker>
                          </div>
                        </template>
                       <!-- <el-input v-model="gridData.teacherBirth" :disabled="gridData.isShow"></el-input> -->
                      </el-form-item>
                      <el-form-item label="性别:">
                       <el-input v-model="gridData.teacherSex" :disabled="gridData.isShow"></el-input>
                      </el-form-item>

                      <el-form-item label="民族:">
                       <el-input v-model="gridData.teacherNational" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="最高学历:">
                       <el-input v-model="gridData.teacherRecord" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱:">
                       <el-input v-model="gridData.teacherEmail" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="地址:">
                       <el-input v-model="gridData.teacherAddress" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="联系方式:">
                       <el-input v-model="gridData.teacherPhone" :disabled="gridData.isShow"></el-input>
                      </el-form-item>

                        <el-form-item label="图片:" :rows="6">
                         <el-input v-model="gridData.teacherPhoto" :disabled="gridData.isShow"></el-input>
                         <!-- <template scope="scope">
                          image :src="scope.row.image" width="80" height="80"/>
                         </template> -->
                        </el-form-item>

                      <el-form-item label="权限等级:">
                        <el-input v-model="gridData.role.roleDesc" :disabled="true"> </el-input>
                      </el-form-item>
                      <el-form-item label="所教课程:">
                        <el-input v-model="gridData.courseId" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="政治面貌:">
                       <el-input v-model="gridData.teacherPolitical" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="籍贯:">
                       <el-input v-model="gridData.teacherNative" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="毕业院校:">
                       <el-input v-model="gridData.teacherSchool" :disabled="gridData.isShow"></el-input>
                      </el-form-item>
                      <el-form-item label="教师类别:">
                       <el-input v-model="gridData.teacherCategory" :disabled="gridData.isShow"></el-input>
                      </el-form-item>

                   <el-form-item label="进修情况:">
                    <el-input type="textarea" v-model="gridData.teacherTraining" :disabled="gridData.isShow"></el-input>
                   </el-form-item>
                   <el-form-item label="曾获奖励:">
                    <el-input type="textarea"  v-model="gridData.teacherReward" :disabled="gridData.isShow"></el-input>
                   </el-form-item>
                   <el-form-item label="曾获处分:">
                    <el-input type="textarea" v-model="gridData.teacherPunish" :disabled="gridData.isShow"></el-input>
                   </el-form-item>
                   <el-form-item label="个人简介:">
                    <el-input type="textarea" v-model="gridData.teacherDetail" :disabled="gridData.isShow"></el-input>

                   </el-form-item>

                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="图片:" >
                       <!-- <el-input v-model="gridData.teacherPhoto" :disabled="gridData.isShow"></el-input> -->
                       <template>
                         <img :src="gridData.teacherPhoto" width="60%" height="300px" border="1px" />
                       </template>
                       <!-- <template scope="scope">
                        image :src="scope.row.image" width="80" height="80"/>
                       </template> -->
                      </el-form-item>
                    </el-col>
                  </el-row>


                 </el-form>
              <div slot="footer" class="dialog-footer" model="gridData">
                   <el-button type="primary" v-model="gridData.isShow" @click="doChange(gridData.isShow)">确 定</el-button>
              </div>

            </el-dialog>

           <el-button type="primary" icon="el-icon-info" size="small" @click="dialogFormVisible = true" @click.native="showDetail(scope.row.teacherId,true)" ></el-button>
        </template>
        </el-table-column>

        <el-table-column
          label="操作"
          prop=""
          width="180">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="small"  @click="dialogFormVisible = true" @click.native="showDetail(scope.row.teacherId,false)"></el-button>
            <el-button type="primary" icon="el-icon-delete" size="small" @click="delTeacher(scope.row.teacherId)"></el-button>
            <!-- <el-button type="primary" icon="el-icon-delete" size="small" @click="delTeacher(scope.row.teacherId)"></el-button> -->

          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 分页 -->
    <div>
      <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="tableData.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="tableData.total">
        </el-pagination>
    </div>
  </div>



</template>


<style>
.el-table th{
  text-align: center;
}
.el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
import {TeachermanageFy} from '@/axios/api'
import {TeachermanageSel} from '@/axios/api'
import {TeachermanageUp} from '@/axios/api'
import {TeachermanageDel} from '@/axios/api'
import {TeachermanageQx} from '@/axios/api'
import {formatDate} from '@/common/js/date'

  export default {
    data() {
      return {
        tid:'',
        tableData: {
          list:[{
            role:{
              roleDesc:{}
            }
          }]
        },
        gridData: {
          role:{},
          isShow:true
        },




        labelPosition: 'right',
        dialogFormVisible: false,

        visible2: false,

        multipleSelection: [],
        currentPage3: 1,
        pageIndex: 1,
        teacherForm: {
          teacherId: '',
          teacherRealname: '',
          teacherInfo: '',
          select: ''

        },

        rules: {
         // teacherInfo: [
         //   { required: true, message: '请输入查询名称', trigger: 'blur' },
           // { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
         // ],
         select: [
           { required: true, message: '请选择查询区域', trigger: 'change' }
         ]
      }
    }
  },
    methods: {
      /**
       * 全选
       */
      toggleSelection(rows) {

        if (rows) {
            rows.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row);
                });
              } else {
                this.$refs.multipleTable.clearSelection();
              }
            },
            handleSelectionChange(val) {
              this.multipleSelection = val;
            },

      /**
       * 模糊查询
       */
      changeModel() {
        if (this.teacherForm.select == "1") {
          this.teacherForm.teacherId = this.teacherForm.teacherInfo;
          this.teacherForm.teacherRealname = '';
        }else {
          this.teacherForm.teacherRealname = this.teacherForm.teacherInfo;
          this.teacherForm.teacherId = '';
        }
        console.log(this.teacherForm);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {teacherId:this.teacherForm.teacherId,teacherRealname:this.teacherForm.teacherRealname,pageIndex:this.pageIndex};
            TeachermanageFy(params).then(res =>{
              this.tableData = res.resData
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 修改角色权限
       * @return {[type]} [description]
       */
      changeRole(rid) {
        let params = {teacherId:this.tid,roleId:rid};
        TeachermanageQx(params).then(res =>{
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        });
        console.log(rid);
      },
      /**
       * 查看详情
       */
      showDetail(val,bool) {

        //alert(val);
        let params = {teacherId:val};
        TeachermanageSel(params).then(res =>{
            console.log(res.resData);
            this.gridData = res.resData;
            this.gridData.teacherBirth=formatDate(new Date(this.gridData.teacherBirth),"yyyy-MM-dd");
            this.gridData.isShow = bool;
        })
      },
      /**
       * 修改
       */
      doChange(bool) {
        this.dialogFormVisible = false;
        console.log(this.gridData);
        if (!bool) {
          let birth = formatDate(new Date(this.gridData.teacherBirth),'yyyy/MM/dd');
          let params = {
                teacherId:this.gridData.teacherId,
                teacherRealname:this.gridData.teacherRealname,
                teacherBirth:birth,
                teacherSex:this.gridData.teacherSex,
                teacherNational:this.gridData.teacherNational,
                teacherRecord:this.gridData.teacherRecord,
                teacherEmail:this.gridData.teacherEmail,
                teacherAddress:this.gridData.teacherAddress,
                teacherPhone:this.gridData.teacherPhone,
                courseId:this.gridData.courseId,
                teacherPolitical:this.gridData.teacherPolitical,
                teacherNative:this.gridData.teacherNative,
                teacherSchool:this.gridData.teacherSchool,
                teacherCategory:this.gridData.teacherCategory,
                teacherTraining:this.gridData.teacherTraining,
                teacherReward:this.gridData.teacherReward,
                teacherPunish:this.gridData.teacherPunish,
                teacherDetail:this.gridData.teacherDetail
          }
          TeachermanageUp(params).then(res =>{
            if (res.status == 200) {
              this.handleCurrentChange(this.pageIndex);
              this.$message({
                message: res.message,
                type: 'success'
              });
            }
          })
        }

      },
      /**
       * 删除
       * @param  {[type]} id [description]
       * @return {[type]}    [description]
       */
      delTeacher(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {teacherId:id};
        TeachermanageDel(params).then(res =>{
          console.log(id);
          if (res.status == 200) {
              this.handleCurrentChange(this.pageIndex);
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 分页
      */
    handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          let params = {pageIndex:val,teacherId:this.teacherForm.teacherId,teacherRealname:this.teacherForm.teacherRealname};
          TeachermanageFy(params).then(res =>{
            console.log(res);
          this.tableData =  res.resData;
          // this.pay = res.resData.studentFirstMoney + res.resData.studentSecondMoney;

          })
        },
    },
    mounted(){
      this.handleCurrentChange(this.pageIndex)
    }
  }
  </script>
